<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-8">
        <my-component :foo.sync="bar"></my-component>
    </div>
    <script>
        // 注册
        Vue.component('my-component', {
            props: ['foo'],
            template: '<div>{{ foo }}<input v-model="foo"/></div>',
            watch: {
                foo: function (newVal, oldVal) {
                    console.log(newVal, "--->", oldVal);
                    this.$emit("update:foo", newVal);
                }
            }
        });
        // 创建根实例
        var app8 = new Vue({
            el: '#app-8',
            data: {
                bar: "bar --> foo"
            }
        })
    </script>
</body>


</html>